<template>
  <PageContainer title="图表示例" :showBack="true">
    <div class="chart-examples">
      <h2 class="section-title">图表类型展示</h2>
      
      <div class="chart-grid">
        <!-- 条形图 -->
        <div class="chart-card">
          <h3>条形图</h3>
          <div class="chart-container">
            <apexchart
              type="bar"
              height="300"
              :options="barChartOptions"
              :series="barChartSeries"
            ></apexchart>
          </div>
        </div>
        
        <!-- 饼图 -->
        <div class="chart-card">
          <h3>饼图</h3>
          <div class="chart-container">
            <apexchart
              type="pie"
              height="300"
              :options="pieChartOptions"
              :series="pieChartSeries"
            ></apexchart>
          </div>
        </div>
        
        <!-- 折线图 -->
        <div class="chart-card">
          <h3>折线图</h3>
          <div class="chart-container">
            <apexchart
              type="line"
              height="300"
              :options="lineChartOptions"
              :series="lineChartSeries"
            ></apexchart>
          </div>
        </div>
        
        <!-- 面积图 -->
        <div class="chart-card">
          <h3>面积图</h3>
          <div class="chart-container">
            <apexchart
              type="area"
              height="300"
              :options="areaChartOptions"
              :series="areaChartSeries"
            ></apexchart>
          </div>
        </div>
      </div>
      
      <div class="chart-info">
        <h3>关于图表组件</h3>
        <p>这些图表使用了 Vue3-ApexCharts 库实现，支持多种图表类型、交互和自定义选项。图表组件封装在 BaseChart.vue 中，可用于各种数据可视化需求。</p>
        
        <h4>图表特点：</h4>
        <ul>
          <li>支持多种图表类型：折线图、柱状图、饼图、面积图等</li>
          <li>完全响应式，适应不同设备和屏幕大小</li>
          <li>丰富的交互选项：工具提示、缩放、导出等</li>
          <li>高度可定制的样式和行为</li>
          <li>类型安全的API，结合TypeScript提供良好的开发体验</li>
        </ul>
      </div>
    </div>
  </PageContainer>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import PageContainer from '@/components/layout/PageContainer.vue'

// 条形图配置
const barChartOptions = ref({
  chart: {
    type: 'bar',
    toolbar: {
      show: false,
    },
  },
  colors: ['#FF6B00'],
  plotOptions: {
    bar: {
      borderRadius: 6,
      columnWidth: '50%',
    },
  },
  dataLabels: {
    enabled: false,
  },
  xaxis: {
    categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  },
  yaxis: {
    title: {
      text: 'Orders',
    },
  },
  tooltip: {
    y: {
      formatter: function (val: number) {
        return val + ' orders'
      },
    },
  },
})

const barChartSeries = ref([
  {
    name: 'Daily Orders',
    data: [35, 41, 36, 26, 45, 48, 52],
  },
])

// 饼图配置
const pieChartOptions = ref({
  chart: {
    type: 'pie',
  },
  colors: ['#FF6B00', '#2C3E50', '#10B981', '#F59E0B', '#3B82F6'],
  labels: ['Burgers', 'Pizza', 'Sushi', 'Salads', 'Drinks'],
  responsive: [
    {
      breakpoint: 480,
      options: {
        chart: {
          width: 200,
        },
        legend: {
          position: 'bottom',
        },
      },
    },
  ],
})

const pieChartSeries = ref([35, 25, 20, 15, 5])

// 折线图配置
const lineChartOptions = ref({
  chart: {
    type: 'line',
    toolbar: {
      show: false,
    },
  },
  colors: ['#3B82F6'],
  stroke: {
    curve: 'smooth',
    width: 3,
  },
  xaxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
  },
  markers: {
    size: 4,
    colors: ['#3B82F6'],
    strokeColors: '#fff',
    strokeWidth: 2,
    hover: {
      size: 6,
    },
  },
  tooltip: {
    y: {
      formatter: function (val: number) {
        return '$' + val.toFixed(2) + 'k'
      },
    },
  },
})

const lineChartSeries = ref([
  {
    name: 'Monthly Revenue',
    data: [31, 40, 28, 51, 42, 56, 65],
  },
])

// 面积图配置
const areaChartOptions = ref({
  chart: {
    type: 'area',
    toolbar: {
      show: false,
    },
  },
  colors: ['#10B981', '#F59E0B'],
  dataLabels: {
    enabled: false,
  },
  stroke: {
    curve: 'smooth',
    width: 2,
  },
  fill: {
    type: 'gradient',
    gradient: {
      shadeIntensity: 1,
      opacityFrom: 0.7,
      opacityTo: 0.2,
    },
  },
  xaxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
  },
  tooltip: {
    y: {
      formatter: function (val: number) {
        return val + ' users'
      },
    },
  },
})

const areaChartSeries = ref([
  {
    name: 'New Users',
    data: [31, 40, 28, 51, 42, 56, 65],
  },
  {
    name: 'Returning Users',
    data: [20, 32, 25, 40, 32, 45, 52],
  },
])
</script>
<style scoped>
.chart-examples {
  padding: 20px 0;
}

.section-title {
  font-size: 20px;
  margin-bottom: 20px;
  color: #333;
}

.chart-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 30px;
}

@media (max-width: 768px) {
  .chart-grid {
    grid-template-columns: 1fr;
  }
}

.chart-card {
  background: white;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  padding: 16px;
}

.chart-card h3 {
  font-size: 16px;
  margin-top: 0;
  margin-bottom: 16px;
  color: #333;
}

.chart-container {
  width: 100%;
  height: 300px;
}

.chart-info {
  background: white;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  padding: 20px;
  margin-top: 20px;
}

.chart-info h3 {
  font-size: 18px;
  margin-top: 0;
  margin-bottom: 16px;
  color: #333;
}

.chart-info h4 {
  font-size: 16px;
  margin-top: 20px;
  margin-bottom: 12px;
  color: #333;
}

.chart-info p {
  color: #666;
  line-height: 1.5;
  margin-bottom: 16px;
}

.chart-info ul {
  margin: 0;
  padding-left: 20px;
}

.chart-info li {
  color: #666;
  margin-bottom: 8px;
  line-height: 1.5;
}
</style>

